<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    
	<title>测试</title>
	
	<!--
    	作者：547187319@qq.com
    	时间：2018-06-14
    	描述：D3样式
    -->
    <script type="text/javascript" src="js/plugins/d3/d3.v4.js"></script>
    <script type="text/javascript" src="js/plugins/jquery/jquery-1.9.1.js"></script>
<script type="text/javascript">
function init(){
	var jsonRectangles = [
    { "x_axis": 10, "y_axis": 10, "height": 20, "width":20, "color" : "green" },
    { "x_axis": 160, "y_axis": 40, "height": 20, "width":20, "color" : "purple" },
    { "x_axis": 70, "y_axis": 70, "height": 20, "width":20, "color" : "red" }];
    var max_x = 0;
  var max_y = 0;
    for (var i = 0; i < jsonRectangles.length; i++) {
    var temp_x, temp_y;
    var temp_x = jsonRectangles[i].x_axis + jsonRectangles[i].width;
    var temp_y = jsonRectangles[i].y_axis + jsonRectangles[i].height;
     if ( temp_x >= max_x ) { max_x = temp_x; }
     if ( temp_y >= max_y ) { max_y = temp_y; }
  }
   var svgContainer = d3.select("body").append("svg")
                                   .attr("width", max_x)
                                   .attr("height", max_y)
   var rectangles = svgContainer.selectAll("rect")
                            .data(jsonRectangles)
                            .enter()
                            .append("rect");
   var rectangleAttributes = rectangles
                         .attr("x", function (d) { return d.x_axis; })
                         .attr("y", function (d) { return d.y_axis; })
                         .attr("height", function (d) { return d.height; })
                         .attr("width", function (d) { return d.width; })
                         .style("fill", function(d) { return d.color; });
}
window.onload=init();
</script>
	<!--
    	作者：547187319@qq.com
    	时间：2018-06-14
    	描述：Style样式
    -->
    <link rel="stylesheet" href="css/demo.css"/>
    
</head>
<body>

</body>
</html>

